<template>
  <div>
    <div class="total-list">
      <CardGroupIndex :data="cardData"></CardGroupIndex>
    </div>
    <div class="g-card g-pad20" style="margin-top: 0;">
      <div class="title">
        数据趋势
      </div>
      <div class="data-content" style="margin-top: 20px;">
        <div class="chart-content">
          <search-title :showMore='true' @search="getLineData"></search-title>
          <chart-line style="height: 300px;" :legend="legend" :xData="xdata" :series="series"></chart-line>
        </div>
      </div>
    </div>
    <div class="g-card g-pad20" style="margin-top: 20px;">
      <div class="title">
        门店新增客户Top10
      </div>
      <div class="data-content" style="margin-top: 20px;">
        <div class="chart-content">
          <search-title @search="getTop10Fn"></search-title>
          <div class="column">
            <div class="column-item">
              <chart-bar style="height: 300px;" :xData="bar" :series="value" :legend="barLegend"></chart-bar>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="g-card g-pad20" style="margin-top: 20px;">
      <div class="title">
        数据报表
      </div>
      <div class="data-content" style="margin-top: 20px;">
        <div class="search-content">
          <search-title :showMore='true' @search="getTableFn"></search-title>
          <el-button type="primary" size="mini" @click="exportFn" v-loading="exportLoading">导出Excel</el-button>
        </div>
        <div class="table-content">
          <el-table v-loading="loading" :data="tableList" style="width: 100%">
            <el-table-column label="日期" align="center" min-width="100" prop="createTime" show-overflow-tooltip />
            <el-table-column label="所属地区" align="center" min-width="100" prop="area" show-overflow-tooltip />
            <el-table-column label="门店名称" align="center" prop="storeName" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column label="点击/扫码总次数" align="center" prop="totalStoreGroupScannNumber" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column label="进群总客户数" align="center" prop="totalJoinGroupMemberNumber" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column label="退群总客户数" align="center" prop="totalExitGroupMemberNumber" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column label="今日点击/扫码总次数" align="center" prop="tdStoreGroupScannNumber" min-width="120" show-overflow-tooltip></el-table-column>
            <el-table-column label="今日进群客户数" align="center" prop="tdJoinGroupMemberNumber" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column label="今日退群客户数" align="center" prop="tdExitGroupMemberNumber" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" align="center" fixed="right" width="180" class-name="small-padding fixed-width">
              <template slot-scope="{ row }">
                <el-button type="text" @click="
                          $router.push({
                            path: 'detail',
                            query: {
                              id: row.storeCodeId,
                            },
                          })">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- <div class="bottom"> -->
          <pagination :total="total" :page.sync="query.pageNum" :limit.sync="query.pageSize" @pagination="getTableChangeSize()" />
          <!-- </div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import ChartBar from '@/components/ChartBar.vue'
  import ChartLine from '@/components/ChartLine.vue'
  import SearchTitle from '../components/SearchTitleInStore.vue'
  import CardGroupIndex from '@/components/CardGroupIndex.vue'
  import { getStoreCodeTab, getLineDataStoreCode, getBarTop10StoreCode, getTableInStoreCode, getTableGuideCodeExport } from "@/api/drainageCode/store"
  import { download } from '@/utils/common'
  export default {
    name: 'store-code-statistics',
    components: {
      CardGroupIndex,
      SearchTitle,
      ChartLine,
      ChartBar
    },
    data () {
      return {
        exportLoading: false,
        barLegend: ['门店'],
        legend: ['点击/扫码次数', '进群客户数', '退群客户数'],
        xdata: [],
        series: [],
        cardData: [
          {
            title: '点击/扫码总次数',
            tips: '进入门店群码页面的总人数（去重）',
            value: 0,
            noArrow: true
          },
          {
            title: '进群总客户数',
            tips: '成功添加门店客户群的客户数（去重）',
            value: 0,
            noArrow: true
          },
          {
            title: '退群总客户数',
            tips: '退出门店客户群的客户数（去重）',
            value: 0,
            noArrow: true
          },
          {
            title: '今日点击/扫码次数',
            tips: '今日进入门店群码页面的总人数（去重）',
            value: 0,
            title1: '较前日',
            value1: 0
          },
          {
            title: '今日进群客户数',
            tips: '今日成功添加门店客户群的客户数（去重）',
            value: 0,
            title1: '较前日',
            value1: 0
          },
          {
            title: '今日退群客户数',
            tips: '今日退出门店客户群的客户数（去重）',
            value: 0,
            title1: '较前日',
            value1: 0
          },
        ],
        total: 0,
        query: {
          pageSize: 10,
          pageNum: 1
        },
        tableList: [],
        loading: false,
        searchData: {},
        bar: [],
        value: [],
        tableSearch: {}
      }
    },
    methods: {
      exportFn () {
        this.$confirm('确认导出吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.exportLoading = true
            return getTableGuideCodeExport(Object.assign({}, this.query, this.tableSearch))
          })
          .then((res) => {
            download(res.data)
          })
          .catch((error) => {
            console.error(error)
          })
          .finally(() => {
            this.exportLoading = false
          })
      },
      getTabTotalFn () {
        getStoreCodeTab().then(res => {
          this.cardData[0].value = res.data.totalStoreGroupScannNumber
          this.cardData[1].value = res.data.totalJoinGroupMemberNumber
          this.cardData[2].value = res.data.totalExitGroupMemberNumber
          this.cardData[3].value = res.data.tdStoreGroupScannNumber
          this.cardData[3].value1 = res.data.ydStoreGroupScannNumber
          this.cardData[4].value = res.data.tdJoinGroupMemberNumber
          this.cardData[4].value1 = res.data.ydJoinGroupMemberNumber
          this.cardData[5].value = res.data.tdExitGroupMemberNumber
          this.cardData[5].value1 = res.data.ydExitGroupMemberNumber
        })
      },
      getLineData (data) {
        this.$forceUpdate()
        getLineDataStoreCode(data).then(res => {
          this.xdata = []
          this.series = []
          let arr1 = []
          let arr2 = []
          let arr3 = []
          if (res.data && res.data.length) {
            res.data.forEach(dd => {
              this.xdata.push(dd.dataTime)
              arr1.push(dd.totalStoreGroupScannNumber)
              arr2.push(dd.totalJoinGroupMemberNumber)
              arr3.push(dd.totalExitGroupMemberNumber)
            })
            this.series = [arr1, arr2, arr3]
            this.$forceUpdate()
          }
        })
      },
      getTop10Fn (data) {
        getBarTop10StoreCode(data).then(res => {
          if (res.data && res.data.length) {
            this.bar = []
            this.value = []
            res.data.forEach(dd => {
              this.bar.push(dd.storeName)
              this.value.push(dd.customerNumber)
            })
          }
        })
      },
      getTableChangeSize () {
        this.loading = true
        getTableInStoreCode(Object.assign({}, this.query, this.tableSearch)).then(res => {
          this.tableList = res.rows
          this.total = Number(res.total)
          this.loading = false
        })
      },
      getTableFn (data) {
        this.loading = true
        this.tableSearch = data
        getTableInStoreCode(Object.assign({}, this.query, data)).then(res => {
          this.tableList = res.rows
          this.total = Number(res.total)
          this.loading = false
        })
      }
    },
    created () {
      this.getTabTotalFn()
      // this.getTop5Fn()
    }
  }
</script>
<style lang="scss" scoped>
  .total-list {
    .item {
      padding: 10px;
      background-color: #fff;
    }
  }
  .title {
    font-size: 16px;
    color: #333;
    font-weight: 600;
  }
  .data-content {
    margin-top: 10px;
    .chart-content {
      margin-top: 10px;
      .my_button {
        float: right;
      }
      .column {
        display: flex;
        .column-item {
          flex: 1;
        }
      }
    }
    .search-content {
      display: flex;
      justify-content: space-between;
    }
    .table-content {
      margin-top: 10px;
    }
  }
</style>